<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue'
	import { onBackPress } from "@dcloudio/uni-app"
	import { getReports } from '@/api/psychology/report.js'

	import { musicClassLists } from '@/api/groupActivies/index.js'
	import { getTasks, getScales } from '@/api/psychology/task.js'
	import { userInfo } from '@/store/Pinia/userInfo.js'

	let tasks = ref<any[]>([]);


	const musicMoudleList = ref([])
	const getMusicClassLists = () => {
		let item = {
			"pid": "3"
		}
		musicClassLists(item).then(res => {
			if (res.data.code == 200) {
				musicMoudleList.value = res.data.data
			}
		})
	}
	onMounted(() => {
		getMusicClassLists()
	}
	)
	// 当前选中的标签索引


	const back = () => {
		uni.navigateBack()
	}

	// 计算页面高度
	const custHeight = computed(() => {
		let systemInfo = uni.getSystemInfoSync()
		return function () {
			console.log(systemInfo)
			return systemInfo.screenHeight - systemInfo.windowTop
		}
	})

	const toMusic = (item) => {
		plus.runtime.launchApplication(
			{
				pname: 'com.Apinsky.Lite2048'
			},
			(e) => {
				console.log('Open system default browser failed: ' + e.message)
			}
		)
	}
	
	const gameMoudleList = ref([
		{name:'2048'}
	])
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
	<articleTable ref="timer"></articleTable>
	<Navigator :fixed="true" background-color="#fa973a" status-bar title="" left-icon="back" left-text="返回" customLeft
		@clickLeft="back">
	</Navigator>
	<!-- <view class="w100p" style="background: linear-gradient(90deg,#4e79e2 , #6d7fe2 );height: 200px;">
		<view class="h100p flex column-center valign-center" style="width: 60%;"> <text
				style="color: white;font-size: 48px;font-weight: 700;margin-right: 20px;">心理音乐</text> <text
				style="font-size: 48px;color:rgba(255,255,255,0.8);">MUSIC</text></view>
		<img :src="'@/../static/img/book.svg'" style="position: absolute; top:10px;width: 20%;right: 10%;" />
	</view> -->
	<top-banner :classTitle="'心理游戏'" :enClassTitle="'GAME'"></top-banner>
	
	<view @touchend="handleEnd" class="wh100p cu-item " :style="{'height':custHeight()+'px'}" style="">
		<view class="music-class-box">
			<view v-for="(item, index) in gameMoudleList" :key="index" class="card">
				<uni-card style="box-shadow: 0 0 10px #b2d1fa ;padding-bottom: 30rpx;overflow: hidden;"
					@click="toMusic(item)">
					<view class="flex gap18"
						style="align-items: center;padding: 20rpx ;border-bottom: 1px solid whitesmoke;">
						<img class="avatar" :src="'@/../static/img/musicIcon.svg'" />
						<view class="title">游戏名称：{{item.name}}</view>
					</view>
					<!-- <view class="dec">介绍：{{item.remark??'暂无'}}</view> -->
				</uni-card>
			</view>

		</view>

	</view>
</template>

<style>
	.title {
		font-size: 36rpx;
		line-height: 70rpx;
	}

	.dec {
		margin-top: 20rpx;
		font-size: 30rpx;
		padding: 10rpx 20rpx;
		line-height: 40rpx;
		overflow: hidden;
		height: 150rpx;
		text-overflow: ellipsis;
		word-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.music-class-box {
		padding: 0 5%;
		display: flex;
	}

	.card {
		width: 800rpx;
		height: 200px;

	}

	.cu-item {
		transition: all .6s ease-in-out 0s;
		transform: translateX(0upx)
	}

	.bgcolor {
		background: linear-gradient(rgba(255, 217, 181, 0.80), #f3f3f3);

	}

	.avatar {
		width: 25%;
		/* border-radius: 50%; */
	}

	page {
		background-color: ;
	}
</style>